<!--
*@Author: QWP
*@Description: 任务报表填报编辑
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs" @close="dialogClose">
    <a-layout class="f-h-100 u-dialog-all-bg">
      <a-layout-content class="s-bg-white" style="overflow: auto">
        <a-space direction="vertical" class="f-w-100">
          <u-busi-card title="基础数据" :bordered="false">
            <u-form
              :elements="formEls"
              :model="form"
              :gutter="0"
              ref="formRef"
            ></u-form>
          </u-busi-card>
          <u-busi-card title="填报数据" :bordered="false">
            <u-edit-table
              :data="tabData"
              :addBtn="false"
              :deleteBtn="false"
              :columns="columns"
            ></u-edit-table>
          </u-busi-card>
        </a-space>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, useAttrs, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import {
  HomeOutlined,
  FileTextOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import { TreeProps } from 'ant-design-vue/es/vc-tree';
import { ColumnProps } from 'ant-design-vue/es/table';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts';
import { fileCols } from '@/common/model/fileCols';
import { regions, depts, users } from '@/common/model/base';
import UIconFont from '@/components/common/iconfont/IconFont.vue';
import { usePreview, useDownload } from '@/hooks/useFile';
import { Button, Space, Image } from 'ant-design-vue';
import { alertC } from '@/util/common';
import dayjs from 'dayjs';
import * as dynamicReportApi from '@/service/emergency/dynamicReport';

const attrs = useAttrs();
const route = useRoute();

const formRef = ref<FormInstance>();
const form = reactive({});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '110px',
  colon: false,
};
const formEls: Array<_IFormEl> = [
  {
    label: '任务名称',
    key: 'filename',
    col: { span: 24 },
    element: 'input',
    formItemProps: {
      ...formItemProps,
      rules: {
        pattern: /^[\u4e00-\u9fa5]{3,}$/,
        message: '名称需要在3个中文字符以上',
      },
    },
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '开始日期',
    key: 'startdate',
    col: { span: 12 },
    element: 'datepicker',
    formItemProps: { ...formItemProps },
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '结束日期',
    key: 'enddate',
    col: { span: 12 },
    element: 'datepicker',
    formItemProps: { ...formItemProps },
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '任务结束前提醒',
    key: 'isend',
    col: { span: 12 },
    element: 'input',
    formItemProps: { ...formItemProps },
    componentProps: {
      disabled: true,
    },
  },
  // {
  //   label: '任务超时后提醒',
  //   key: 'isover',
  //   col: { span: 12 },
  //   element: 'input',
  //   formItemProps: { ...formItemProps },
  //   componentProps: {
  //     disabled: true,
  //   },
  // },
  {
    label: '任务说明',
    key: 'remark',
    col: { span: 24 },
    element: 'textarea',
    formItemProps: { ...formItemProps },
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '报表模版',
    key: 'saveVO',
    col: { span: 24 },
    element: 'file',
    formItemProps: { ...formItemProps },
    componentProps: {
      disabled: true,
      fileParams: { biztype: '1', bucket: 'EXE_BIZ_TYPE_FORMS', maxCount: 1 },
    },
  },
];

// 填报列表
let tabData = ref<any>([]);
let columns = ref<any>([
  {
    title: '序号',
    dataIndex: 'index',
    width: 20,
    align: 'center',
    customRender: ({ text, index }) => {
      return index + 1;
    },
  },
  {
    title: '姓名',
    dataIndex: 'username',
    width: 70,
    align: 'center',
  },
  {
    title: '文件名',
    dataIndex: 'filename',
    width: 70,
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'isfill_echo',
    width: 70,
    align: 'center',
  },
  {
    dataIndex: 'do',
    title: '操作',
    width: 150,
    align: 'center',
    fixed: 'right',
    customRender: ({ text, record }) => {
      return h(
        Space,
        { size: 40, style: { fontSize: '16px', color: '#1890ff' } },
        () => [
          h(UIconFont, {
            type: 'icon-a-lujing12',
            onClick: () => {
              if (record.isfill == 0) {
                alertC('该成员还未填报');
              } else {
                useDownload(record);
              }
            },
          }),
        ]
      );
    },
  },
]);

// 弹窗关闭
const dialogClose = () => {
  // formRef.value.form.resetFields();
};
//获取数据
const getSearch = async (keyid: any) => {
  const res = await dynamicReportApi.searchTask({ fkFormsid: keyid });
  if (res.code == 0) {
    for (let k in res.data.exeTForms) {
      form[k] = res.data.exeTForms[k];
    }
    form['saveVO'] = res.data.formAttachList;
    tabData.value = res.data.appendisUserMapList;
    tabData.value.map(e => {
      e.isfill_echo = e.isfill == 0 ? '未填报' : '已填报';
    });
  }
};

//文件下载
const download = (fileName: string) => {
  // 新窗口打开路由的方式
  // let router1 =router.resolve({path:'/FileEcho',query:{fileName}})
  window.open(fileName, '_blank');
};

watch(
  () => attrs.open,
  async (nval, oval) => {
    if (nval == true) {
      await getSearch(attrs.keyid);
    }
  }
);
</script>

<style lang="scss">
.u-dialog-all-bg {
  position: absolute !important;
  left: 0;
  padding: 20px;
  width: 100%;
  height: calc(100vh - 130px);
}
</style>
